@mixin clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin trans($time) {
	-webkit-transition: all $time ease;
	-moz-transition: all $time ease;
	transition: all $time ease;
}
@mixin fixanimation() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

@mixin oneline() {
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@mixin fullbg() {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

/* Flex Box */
@mixin flexbox() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin flex-wrap($fw) {
    @if $fw == nowrap {
        -webkit-box-lines: single;
        -moz-box-lines: single;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    } @else if $fw == wrap {
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    } @else {
        -webkit-flex-wrap: $fw;
        -ms-flex-wrap: $fw;
        flex-wrap: $fw;
    }
    
}

@mixin flex-shrink($fs) {
    -webkit-flex-shrink: $fs;
    -ms-flex: 0 $fs auto;
    flex-shrink: $fs;
}

@mixin justify-content($jc) {
    @if $jc == flex-start {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    } @else if $jc == flex-end {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    } @else if $jc == space-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    } @else {
        -webkit-box-pack: $jc;
        -ms-flex-pack: $jc;
        -webkit-justify-content: $jc;
        justify-content: $jc;
    }
}

@mixin align-items($ai) {
    @if $ai == flex-start {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    } @else if $ai == flex-end {
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        -align-items: flex-end;
    } @else {
        -webkit-box-align: $ai;
        -ms-flex-align: $ai;
        -webkit-align-items: $ai;
        -align-items: $ai;
    }
}

@mixin align-content($ac) {
    -ms-flex-linke-pack: $ac;
    -webkit-align-content: $ac;
    align-content: $ac;
}

@mixin align-self($as) {
    -ms-flex-item-align: $as;
    -webkit-align-self: $as;
    align-self: $as;
}